<!--  -->
<template>
  <div ref="pageComBox" class="app-container page_wrapper">
    <div ref="otherBox">
      <Params ref="params" @search="customerContract" />
    </div>
    <el-table
      ref="multipleTable"
      :data="dataList"
      style="width: 100%"
      v-loading="loading"
      element-loading-text="加载中..."
      :max-height="tableHeight"
      :key="tableHeight"
      v-tabscroll="$getTableHeight"
    >
      <el-table-column label="签约编号">
        <template slot-scope="{ row }">
          <el-popover
            placement="top-start"
            trigger="hover"
            v-if="row.isDoc == 0"
          >
            <div
              class="contractImg"
              v-for="(item, index) in row.images"
              :key="index"
            >
              <img :src="item" alt="" />
            </div>
            <div class="contractCode" slot="reference">
              {{ row.contractCode }}
            </div>
          </el-popover>
          <a :href="row.images" class="contractCode" target="_blank" v-else>{{
            row.contractCode
          }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="customerName" label="客户姓名">
        <template slot-scope="{ row }">
          <el-link type="primary" class="el_link" @click="lookDetail(row)">{{
            row.customerName
          }}</el-link>
          <!-- <a href="javascript:void(0)">{{row.customerName}}</a> -->
        </template>
      </el-table-column>
      <el-table-column prop="customerMobile" label="客户电话" />
      <el-table-column prop="deposit" label="签约额度" />
      <el-table-column prop="state" label="状态">
        <template slot-scope="{ row }">
          {{ SIGNSTATUSLIST[row.state] }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" />
      <el-table-column label="未跟进时间">
        <template slot-scope="scope">
          <div class="red">{{ scope.row.days }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="createDate" label="签约日期" :width="tdWidth">
      </el-table-column>
      <el-table-column width="300" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editHandle(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="InputUpHandle(scope.row)"
            >进件</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="invalidHandle(scope.row)"
            >作废</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <BasePagination
      v-model="page"
      :total="totalCount"
      :pageSize="pageSize"
      @change="pageOnChange"
    />
    <el-dialog
      title="编辑签约"
      width="60%"
      :visible.sync="editDialog"
      :close-on-click-modal="false"
    >
      <Form :submitType="2" ref="form" @updateEvent="updateEvent" />
    </el-dialog>
    <el-dialog
      title="进件"
      width="40%"
      :visible.sync="addInputDialog"
      :close-on-click-modal="false"
    >
      <InputForm
        ref="InputForm"
        @change="addInputDialog = false"
        @updateEvent="updateEvent"
      />
    </el-dialog>
  </div>
</template>

<script>
import { customerContract, abolishCustomerContract } from "@/api/customer";
import Params from "./Params.vue";
import Form from "./AddContract.vue";
import InputForm from "../my-input/Form.vue";
import { way } from "./config";
import { SIGNSTATUSLIST } from "@/common/constants";
import { broadcast } from "@/utils/util";
export default {
  components: { Params, Form, InputForm },
  data() {
    return {
      page: 1,
      pageSize: 100,
      dataList: [],
      totalCount: 0,
      editDialog: false,
      way,
      addInputDialog: false,
      tdWidth: 160,
      SIGNSTATUSLIST: SIGNSTATUSLIST,
      loading: false,
      tableHeight: 0,
    };
  },
  computed: {},
  watch: {},
  mounted() {
   // 计算表格的高度
   let _this = this
    this.$getTableHeight();
    window.onresize = function () {
      _this.$getTableHeight();
    };
  },
  methods: {
    async customerContract(form) {
      this.showAppLoading();
      try {
        this.loading = true;
        await customerContract({
          page: this.page,
          size: this.pageSize,
          paramObject: { ...form },
        }).then((res) => {
          this.loading = false;
          const { data } = res;
          if (data.dataList) {
            data.dataList.forEach((element) => {
              if (element.images) {
                element.images = element.images.split(",");
              }
              console.log(element);
            });
          }
          this.dataList = data.dataList || [];
          console.log(this.dataList);
          this.totalCount = data.totalCount;
        });
        this.hideAppLoading();
      } catch (error) {
        console.log(error);
        this.hideAppLoading();
      }
    },
    pageOnChange(row) {
      this.page = row.page;
      if (row.pageSize) {
        this.pageSize = row.pageSize;
      }
      this.$refs.params.search();
    },
    followUpHandle() {},
    invalidHandle(item) {
      this.$confirm(`确认作废${item.customerName}的合同?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        beforeClose: async (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "删除中...";
            try {
              await abolishCustomerContract({ id: item.id }).then((res) => {
                this.$message({
                  message: res.message,
                  type: "success",
                });
              });
              done();
              instance.confirmButtonLoading = false;
              instance.confirmButtonText = "确定";
            } catch (error) {
              done();
              instance.confirmButtonLoading = false;
              instance.confirmButtonText = "确定";
            }
          } else {
            done();
          }
        },
      });
    },
    editHandle(item) {
      this.editDialog = true;
      this.$nextTick(() => {
        this.$refs.form.setData(Object.assign({}, item));
      });
    },
    updateEvent() {
      this.$refs.params.search();
    },
    InputUpHandle(item) {
      this.addInputDialog = true;
      this.$nextTick(() => {
        this.$refs.InputForm.setAddData(Object.assign({}, item));
      });
    },

    // 查看用户
    lookDetail(row) {
      let arr = [];
      let list = this.dataList;
      let o = JSON.parse(JSON.stringify(row));
      o.id = o.customerId;
      list.map((k) => {
        let n = JSON.parse(JSON.stringify(k));
        n.id = k.customerId;
        arr.push(n);
      });
      broadcast("look.user.follow", { data: o, list: arr });
    },
  },
  created() {},
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.el_link {
  text-decoration: underline;
}
</style>
